<template>
  <div>
     <!-- 查看详情弹框 -->
    <el-dialog
      title="申请额度"
      :visible.sync="applyCreditShow"
      width="500px"
      :before-close="handleCloses"
      append-to-body
      :close-on-click-modal="false"
    >
      <!-- <hr class="hr"> -->
      <p class="shopList">今日数据</p>

      <div v-loading="listLoading" class="froms">
        <el-form  :model="formInline" class="demo-form-inline">
          <el-col>
          <el-form-item label="选择充值通道" label-width="120px">
            <el-select v-model="formInline.id" @change="queryProductInfo(formInline.id)" clearable placeholder="请选择">
              <el-option v-for="(item,i) in NameList" :key="'a'+i" :label="item.channelName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          </el-col>
          <!-- <br> -->
          <el-col>
          <el-form-item label="总额度" label-width="120px">
            <el-input v-model="formInline.dayQuota" type="number" style='width:193px' placeholder="请输入总额度"></el-input>
          </el-form-item>
          </el-col>
          
          <span class="shopList_p" v-if='formInline.id != ""'>可申请额度：{{formInline.dayAremainQuota}}元 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 已申请额度：{{formInline.dayUseQuota}}元</span>
          <!-- <br> -->
          <el-col>
          <el-form-item label="申请额度" label-width="120px">
            <el-input v-model="formInline.aremainQuota" type="number" style='width:193px' placeholder="请输入本次申请代付额度"></el-input>
          </el-form-item>
          </el-col>
          <!-- <br> -->
          
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" >
            <el-button type="primary" @click="onSubmit">确  认</el-button>
            <el-button @click="handleCloses">取  消</el-button>
          </div>
    </el-dialog>


  </div>
</template>
<script>
import bus from "../../assets/js/bus";
import https from "../../plugins/https.js";
import qs from 'qs'
export default {
  props: {
    applyCreditShow: {
      type: Boolean,
      default() {
          return false
      }
    },
    saveChannelUid:{
      type: Number
    }
  },
  data(){
    return{
      formInline: {
        id: '',
        aremainQuota: '',
        dayQuota: '',
        dayAremainQuota: '0.00',
        dayUseQuota: '0.00'
      },
      NameList: [],
      totalNum: 0, //总页数
      tableData: [],
      listLoading: false
    }
  },
  watch : {
    applyCreditShow (n) {
      if (n === true) {
        this.queryChannel()
      }
    }
  },
  mounted () {
    // console.log(555, this.eventShow)
  },
  methods:{
    queryChannel () {
      this.listLoading = true
      https.queryChannel().then(res => {
        if (res.data.code !== '0000') {
          // this.$notify({title: "错误",message: res.data.msg,type: "error"});
          layer.open({
              content: res.data.msg,
              skin: "msg",
              time:  2, //1秒后自动关闭
            });
          this.listLoading = false
          return
        }
        this.NameList = res.data.data
        this.listLoading = false
      })
    },
    queryProductInfo (id) {
      if (id == '') {
        this.formInline.dayQuota = ''
        this.formInline.dayAremainQuota = 0.00
        this.formInline.dayUseQuota = 0.00
        return
      }
      this.listLoading = true
      https.repayDetail({id:id}).then(res => {
        if (res.data.code !== '0000') {
          // this.$notify({title: "错误",message: res.data.msg,type: "error"});
          layer.open({
              content: res.data.msg,
              skin: "msg",
              time:  2, //1秒后自动关闭
            });
          this.listLoading = false
          return
        }
        this.formInline.dayQuota = res.data.data.dayQuota
        this.formInline.dayAremainQuota = res.data.data.dayAremainQuota
        this.formInline.dayUseQuota = res.data.data.dayUseQuota
        this.listLoading = false
      })
    },
    onSubmit () {
      if (this.formInline.id == '') return 
      layer.open({
              content:'请输入选中充值通道',
              skin: "msg",
              time:  2, //1秒后自动关闭
            });
      // this.$notify({title: "错误",message: ,type: "error"});
      if (this.formInline.dayQuota == '') return 
      layer.open({
              content: '请输入总额度',
              skin: "msg",
              time:  2, //1秒后自动关闭
            });
      // this.$notify({title: "错误",message: ,type: "error"});
      if (+this.formInline.dayQuota < 1) return 
        layer.open({
          content:'请输入正确总额度',
          skin: "msg",
          time:  2, //1秒后自动关闭
        });
      // this.$notify({title: "错误",message: ,type: "error"});
      if (this.formInline.aremainQuota == '') return 
      layer.open({
              content: '请输入申请额度',
              skin: "msg",
              time:  2, //1秒后自动关闭
            });
      // this.$notify({title: "错误",message: ,type: "error"});
      if (+this.formInline.aremainQuota < 1) return 
      layer.open({
              content: '请输入正确申请额度',
              skin: "msg",
              time:  2, //1秒后自动关闭
            });
      // this.$notify({title: "错误",message: ,type: "error"});
      this.listLoading = true
      let pl = {
        id: this.formInline.id,
        dayQuota: this.formInline.dayQuota,
        aremainQuota: this.formInline.aremainQuota
      }
      https.updaterepay(pl).then(res => {
        if (res.data.code !== '0000') {
          layer.open({
              content: res.data.msg,
              skin: "msg",
              time:  2, //1秒后自动关闭
            });
          // this.$notify({title: "错误",message: res.data.msg,type: "error"});
          this.listLoading = false
          return
        }
        // this.$notify({title: "成功",message: '保存成功',type: "success"});
        bus.$emit("applyCreditSuccess", {type:1,show:false})
        this.formInline = {
          id: '',
          aremainQuota: '',
          dayQuota: '',
        }
        this.listLoading = false
      })
    },
    handleCloses(done) {
      bus.$emit("applyCreditSuccess", {type:2,show:false})
      this.formInline = {
        id: '',
        aremainQuota: '',
        dayQuota: '',
      }
    },
    productInfoExport(){
      // window.location.href = this.GLOBAL.httpurl + `/api/active/productInfo/excel/export?${qs.stringify(this.formInline)}`;
    },
  }
}
</script>
<style scoped>
.shopList_p{
  display: inline-block;
  color: #999;
  margin-top: 12px;
  /* margin-bottom: 50px; */
}
.foot{
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.hr{
  margin-top: -30px;
}
.btnExport {
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
}
.pagination {
  margin-top: 10px;
}
 .sousuojg6_10 {
  /* float: left; */
  font-size: 16px;
  color: #222;
  box-sizing: border-box;
  background-color: #f6f6f6;
  border-radius: 5px;
}
.shopList {
  width: 100%;
  /* border-bottom: 1px solid #ccc; */
  line-height: 50px;
  font-size: 16px;
  height: 30px;
  margin-top: -30px;
  margin-bottom: 30px;
}
.froms{
  height: 100px;
  width:500px
}
</style>
